<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				border: none;
			}
			#box{
				width:750px;
				height: 200px;
				border: 1px solid darkgrey;
				position: relative;
				margin: 150px auto;
				overflow: hidden;
			}
			#top{
				
			}
			 ul{
					width: 2700px;
					position: absolute;
					left: 0;
					top:25px;
			}
			 #top li{
				float: left;
			 }
			#bottom{
				position: absolute;
				bottom: 0;
				border-top: darkgray 1px solid;
				background-color: #A9A9A9;
				width: 100%;
				height: 25px;
			}
			#mask{
				position: absolute;
				bottom: 0;
				border-radius: 15px;
				background-color: orangered;
				height: 25px;
				width: 208px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="top">
				<ul>
					<li><img src="img/img1.jpg" alt=""></li>
					<li><img src="img/img2.jpg" alt=""></li>
					<li><img src="img/img3.jpg" alt=""></li>
					<li><img src="img/img4.jpg" alt=""></li>
					<li><img src="img/img5.jpg" alt=""></li>
					<li><img src="img/img6.jpg" alt=""></li>
					<li><img src="img/img7.jpg" alt=""></li>
					<li><img src="img/img8.jpg" alt=""></li>
					<li><img src="img/img1.jpg" alt=""></li>
					<li><img src="img/img2.jpg" alt=""></li>
					<li><img src="img/img3.jpg" alt=""></li>
					<li><img src="img/img4.jpg" alt=""></li>
					<li><img src="img/img3.jpg" alt=""></li>
					<li><img src="img/img4.jpg" alt=""></li>
					<li><img src="img/img5.jpg" alt=""></li>
					<li><img src="img/img6.jpg" alt=""></li>
					<li><img src="img/img7.jpg" alt=""></li>
					<li><img src="img/img8.jpg" alt=""></li>
					<li><img src="img/img1.jpg" alt=""></li>
					<li><img src="img/img2.jpg" alt=""></li>
					
				</ul>
			</div>
			<div id="bottom">
				<span id="mask"></span>
			</div>
		</div>
		<script>
			window.onload = function (){
			var box = document.getElementById('box');
				var top = box.children[0];
				var ul = top.children[0]
				 var list= ul.children;
				 console.log(list);
				var bottom = box.children[1];
				var mask = bottom.children[0];
				 console.log(mask);
				
				 mask.onmousedown = function(event){
					var event = event ||window.event;
					
					var x = event.clientX- mask.offsetLeft;
					
				document.onmousemove  =function(event){
					var event = event ||window.event;
					
					var movex = event.clientX -x;
					if(movex<0){
						movex = 0;	}
						else if(movex>=box.offsetWidth-mask.offsetWidth)
						{
							movex = box.offsetWidth - mask.offsetWidth;
						}
					//动起来
					mask.style.left = movex +'px';
					var text = (ul.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * movex;
					ul.style.left = -text +'px'; 
				};	
					
				 document.onmouseup = function () {
				     document.onmousemove = null;
				 };
		}
			}
		</script>
	</body>
</html>
